<!--
 * @Author: your name
 * @Date: 2021-03-30 16:15:50
 * @LastEditTime: 2021-03-30 17:00:23
 * @LastEditors: Please set LastEditors
 * @Description: 分页
 * @FilePath: /medicine-web/src/components/Pagation/index.vue
-->
<template>
  <div class="pagation-container">
    <a-pagination v-model="current" :total="total" :item-render="itemRender" @change="onChange"/>
  </div>
</template>
<script>
export default {
  name: 'Pagation',
  computed: {
    current: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  props: {
    total: {
      type: Number,
      default: 200
    },
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    itemRender(current, type, originalElement) {
      if (type === 'prev') {
        return <span></span>
      } else if (type === 'next') {
        return <span></span>
      }
      return originalElement
    },
    onChange (pageNumber) {
      console.log('onChange===========', pageNumber)
      this.$emit('handlePage', pageNumber)
    }
  },
}
</script>
<style lang="scss" scoped>
.pagation-container {
  text-align: center;
  /deep/ .ant-pagination-next {
    display: none;
  }
  /deep/ .ant-pagination-prev {
    display: none;
  }
  /deep/ .ant-pagination-item-active {
    border-color: #10F1B5;
    a {
      color: #10F1B5;
    }
  }
  /deep/ .ant-pagination-item:hover {
    border-color: #10F1B5;
    a {
      color: #10F1B5;
    }
  }
  /deep/ .ant-pagination-item-link-icon {
    color: #BFBFBF;
  }
}
</style>